<template>
  <div class="mask-black-dialog">
    <div class="m-alert">
      <div class="alert-hd">
        <h1 v-html="title"></h1>
      </div>
      <div class="alert-bd">
        <div v-html="mes"></div>
      </div>
      <div class="alert-ft">
        <a href="javascript:;" class="alert-btn primary" @click.stop="closeAlert">{{button}}</a>
      </div>
    </div>
  </div>
</template>

<script type="text/babel">
  export default {
    props: {
      title: String,
      mes: String,
      callback: Function,
      button: String
    }
  }
</script>

<style lang="less" scoped>

   @keyframes myshow{
    from { transform:scale(0,0); }
    to { transform:scale(1,1);}
  }

  .m-alert {
    width: 90%;
    background-color: #FFF;
    border-radius: 10px;
    font-size: 15px;
    animation:myshow .5s;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
  }

  .alert-hd {
    height: 80px;
    line-height: 80px;
    text-align: center;
    position: relative;
    h1 {
      height: 100%;
      font-size: 36px; /* px */
      line-height: 60px;
      font-weight: normal;
      color: #d93035;
      border-bottom: 2px solid #dfdfdf;
      border-radius: 12px 12px 0 0;
    }
  }

  .alert-bd {
    padding: 40px 10px;
    font-size: 32px; /* px */
    color: #404040;
    text-align: center;
    font-weight: 700;
    line-height: 48px;
    div {
        width: 100%;
    }
  }

  .alert-ft {
    width:244px;
    margin: 0 auto;
    position: relative;
    background-color: #95b04c;
    color: #FFF;
    height: 92px;
    line-height: 100px;
    font-size: 32px; /* px */
    display: flex;
    border-radius: 10px;
    margin-bottom: 40px;
    > a {
      position: relative;
      text-align: center;
      display: block;
      flex: 1;
      padding: 0 2px;
      &.alert-btn.default {
        color: #95b04c;
      }
      &.alert-btn.primary {
        color: #FFF;
      }
    }
  }
</style>
